<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="one">{{companyInfo.companyName}}</view>
				<view class="two">您已跟铖联合作{{companyInfo.joinDays}}天啦</view>
			</view>
			<view class="bottom">
				<view class="common">
					<view>累计剩余应付金额</view>
					<view><text class="money">{{companyInfo.sparePayAmount}}</text> 元</view>
				</view>
				<view class="common">
					<view>待核销金额</view>
					<view><text class="money">{{companyInfo.totalWaitWriteOffAmount}}</text> 元</view>
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="same" :class="{'active': active === '1'}" @click="goViewBill('1')">
				<view v-if="active === '1'" class="border"></view>
				未结清账单
			</view>
			<view class="same" :class="{'active': active === '2'}" @click="goViewBill('2')">
				<view v-if="active === '2'" class="border"></view>
				已结清账单
			</view>
		</view>
		<view v-if="active === '1'">
			<view v-if="listUncleared.length">
				<view v-for="item in listUncleared" class="uncleared-contain">
					<view class="uncleared-one">
						<view class="uncleared-one-left">{{item.settlementName}}月账单</view>
						<view class="uncleared-one-right" :class="{'uncleared-orange': item.payAmount !== item.sparePayAmount,'uncleared-red': item.payAmount === item.sparePayAmount}">{{item.payAmount === item.sparePayAmount ? "未付款" : "未结清"}}</view>
					</view>
					<view class="uncleared-two">
						<view class="uncleared-two-common">
							<view>应付金额</view>
							<view class="uncleared-two-common-text">{{item.payAmount}}</view>
						</view>
						<view class="uncleared-two-common">
							<view>已核销</view>
							<view class="uncleared-two-common-text">{{item.writeOffAmount}}</view>
						</view>
					</view>
					<view class="uncleared-two">
						<view class="uncleared-two-common">
							<view>剩余应付</view>
							<view class="uncleared-two-common-text">{{item.sparePayAmount}}</view>
						</view>
						<view class="uncleared-two-common">
							<view>待核销</view>
							<view class="uncleared-two-common-text">{{item.waitWriteOffAmount}}</view>
						</view>
					</view>
					<view class="uncleared-four">
						<view class="uncleared-four-one" @click="gotoTurn(item)">分批支付</view>
						<view class="uncleared-four-two" @click="gotoAll(item)">全部支付</view>
					</view>
				</view>
				<view class="common-bottom" v-if="hasMoreUncleared" @click="getMoreUncleared">点击加载更多</view>
				<view class="common-bottom" v-else>没有更多数据啦</view>
			</view>
			<view v-else class="no-data">暂无数据</view>
		</view>
		<view v-if="active === '2'">
			<view v-if="listSettled.length">
				<view v-for="item in listSettled" class="settled-contain">
					<view class="settled-one">{{item.settlementName}}月账单</view>
					<view class="settled-two">应付金额：{{item.payAmount}} 元</view>
				</view>
				<view class="common-bottom" v-if="hasMoreSettled" @click="getMoreSettled">点击加载更多</view>
				<view class="common-bottom" v-else>没有更多数据啦</view>
			</view>
			<view v-else class="no-data">暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: "1",
				listUncleared: [],
				UnclearedPage: 1,
				UnclearedSize: 5,
				hasMoreUncleared: true,
				listSettled: [],
				settledPage: 1,
				settledSize: 5,
				hasMoreSettled: true,
				requireParam: "",
				companyInfo: {},
			}
		},
		onLoad(options) {
			this.requireParam = options.r || ""
			this.getBillTotal()
			this.getMoreUncleared()
		},
		methods: {
			getBillTotal() {
				uni.request({
					url: `/api/cl-settlement/bill/${this.requireParam}/total`,
					data: {},
					success: res => {
						this.companyInfo = res.data.data || {};
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			goViewBill(str) {
				this.active = str;
				if (this.active === "1") {
					this.UnclearedPage = 1
					this.UnclearedSize = 5
					this.hasMoreUncleared = true
					this.listUncleared = []
					this.getMoreUncleared()
				} else {
					this.settledPage = 1
					this.settledSize = 5
					this.hasMoreSettled = true
					this.listSettled = []
					this.getMoreSettled()
				}
			},
			getMoreSettled() {
				uni.request({
					url: `/api/cl-settlement/bill/${this.requireParam}/list`,
					data: {
						current: this.settledPage,
						size: this.settledSize,
						isOver: 1
					},
					success: res => {
						this.listSettled = this.listSettled.concat(res.data.data.records)
						this.settledPage++
						if (res.data.data.total <= this.listSettled.length) {
							this.hasMoreSettled = false
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			getMoreUncleared() {
				uni.request({
					url: `/api/cl-settlement/bill/${this.requireParam}/list`,
					data: {
						current: this.UnclearedPage,
						size: this.UnclearedSize,
						isOver: 0
					},
					success: res => {
						this.listUncleared = this.listUncleared.concat(res.data.data.records)
						this.UnclearedPage++
						if (res.data.data.total <= this.listUncleared.length) {
							this.hasMoreUncleared = false
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			gotoTurn(item) {
				uni.showModal({
					title: '分批支付',
					editable: true,
					placeholderText: '请输入本次支付金额',
					confirmText: '确定',
					confirmColor: '#2c93e3',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log(res.content)
							const numReg = /^[0-9]+$/
							const dotReg = /^\d+(\.\d+)?$/
							if (!res.content) {
								uni.showToast({
									title: '请填写本次支付金额!',
									icon: 'none',
								})
								return
							} else if (Number(res.content) <= 0) {
								uni.showToast({
									title: '支付金额必须大于0!',
									icon: 'none',
								})
								return
							} else if (!numReg.test(res.content) && !dotReg.test(res.content)) {
								uni.showToast({
									title: '支付金额必须是整数或者小数!',
									icon: 'none',
								})
								return
							}
							uni.showLoading({
								title: "加载中"
							})
							uni.request({
								url: `/api/cl-settlement/bill/${this.requireParam}/pay`,
								method: "POST",
								data: {
									settlementCode: item.settlementCode,
									totalFee: res.content,
								},
								success: res => {
									uni.hideLoading()
									// 在某个页面的方法中触发跳转外链
									uni.navigateTo({
										url: '/pages/webview/webview?url=' + res.data.data.payUrl
									});
								},
								fail: err => {
									uni.hideLoading()
									console.log(err)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击了取消按钮')
						}
					}
				})
			},
			gotoAll(item) {
				uni.showLoading({
					title: "加载中"
				})
				uni.request({
					url: `/api/cl-settlement/bill/${this.requireParam}/pay`,
					method: "POST",
					data: {
						settlementCode: item.settlementCode,
						totalFee: item.sparePayAmount,
					},
					success: res => {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/webview/webview?url=' + res.data.data.payUrl
						});
					},
					fail: err => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		background-color: #1c91e1;
		color: white;
		padding: 30px 20px;
	}
	.top {
		padding: 0 20px 30px;
		border-bottom: 1px solid #6bb8ec;
		margin-bottom: 30px;
	}
	.one {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 6px;
	}
	.two {
		color: #97ccf1;
		font-size: 15px;
	}
	.bottom {
		display: flex;
	}
	.common {
		flex: 1;
		text-align: center;
		font-size: 15px;
	}
	.money {
		font-size: 18px;
		font-weight: bold;
	}
	.tab {
		background-color: #FFFFFF;
		color: #000000;
		font-size: 16px;
		display: flex;
	}
	.same {
		flex: 1;
		text-align: center;
		padding: 10px;
		position: relative;
	}
	.active {
		color: #2c93e3;
		font-weight: bold;
	}
	.border {
		width: 20px;
		height: 100%;
		border-bottom: 3px solid #2c93e3;
		position: absolute;
		left: calc(50% - 10px);
		bottom: 0px;
	}
	.settled-contain {
		margin: 16px;
		background-color: #FFFFFF;
		padding: 16px;
		border-radius: 6px;
	}
	.settled-one {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.settled-two {
		font-size: 16px;
		color: #666666;
	}
	.common-bottom {
		text-align: center;
		font-size: 16px;
		color: #666666;
		padding-bottom: 30px;
	}
	.uncleared-contain {
		margin: 16px;
		background-color: #FFFFFF;
		border-radius: 6px;
	}
	.uncleared-one {
		display: flex;
		justify-content: space-between;
		padding: 16px 0px;
		margin: 0px 16px;
		border-bottom: 1px solid #eeeeee;
	}
	.uncleared-one-left {
		font-size: 18px;
	}
	.uncleared-one-right {
		padding: 4px 10px;
	}
	.uncleared-orange {
		color: orange;
		border: 1px solid orange;
		border-radius: 4px;
		background-color: #fdf6ec;
		font-size: 14px;
	}
	.uncleared-red {
		color: red;
		border: 1px solid red;
		border-radius: 4px;
		background-color: #fef0f0;
		font-size: 14px;
	}
	.uncleared-two {
		margin: 0px 16px;
		padding: 16px 6px;
		display: flex;
		border-bottom: 1px solid #eeeeee;
	}
	.uncleared-two-common {
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 0px 10px;
		font-size: 14px;
	}
	.uncleared-two-common-text {
		color: #aeaeae;
	}
	.uncleared-four {
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #eeeeee;
		padding: 8px 0px;
	}
	.uncleared-four-one {
		padding: 4px 10px;
		color: #2c93e3;
		border: 1px solid #2c93e3;
		border-radius: 50px;
		background-color: #ecf5ff;
		font-size: 14px;
		margin-right: 20px;
	}
	.uncleared-four-two {
		padding: 4px 10px;
		color: #FFFFFF;
		border: 1px solid #2c93e3;
		border-radius: 50px;
		background-color: #2c93e3;
		font-size: 14px;
		margin-right: 10px;
	}
	.no-data {
		width: 100%;
		height: 300px;
		line-height: 300px;
		text-align: center;
	}
</style>
